<template>
  <div style="margin-top:-18px">
    <a-card :bordered="false"> 
      <div class="table-page-search-wrapper">
        <a-button style="margin-top:20px;margin-left:20px" type="primary" @click="addEvent">添加合同</a-button> 
        <a-form layout="inline" class="formAddModel" style='margin-left:20px;margin-top:10px'>
          <a-row :gutter="48">
            <a-col :md="4" :sm="24">
              <a-form-item label="合同名称">
                <a-input v-model="queryParam.contractName" placeholder="" />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item label="合同编号">
                <a-input v-model="queryParam.contractNo" placeholder="" />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
                <a-form-item label="合作单位名称">
                  <a-input v-model="queryParam.companyName" placeholder="" />                
                </a-form-item>
              </a-col>
             
            <a-col :md="4" :sm="24">         
                <a-button style="margin-top:6px" type="primary" @click="selectEvent" >查询</a-button>                        
            </a-col>
          </a-row>
        </a-form>
      </div> 
      <!-- //表格 -->
      <a-table style="margin: 0 20px 20px 20px" @change="pageShow" :loading="tableLoading"
      :columns="columnstable" :data-source="data"  :pagination="pagination"
      bordered size="middle"  >
        <template slot="action1" slot-scope="text, record">  
          <a :href="record.annex">{{fileCutting(record.annex)}}</a>
        </template> 
        <template slot="action" slot-scope="text, record">
          <a @click="modifyEvent(record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="quxiaoEvent(record.id)">删除</a>
        </template> 
        <template slot="startTime" slot-scope="text, record">  
          <span>{{dataFunction(text)}}</span>
        </template>
        <template slot="endTime" slot-scope="text, record">  
          <span>{{dataFunction(text)}}</span>
        </template>  
        
      </a-table>
      <!-- //添加合同 -->
      <AddContract  v-if="addShow" @cancelEvent="cancelEvent" @successEvent="successEvent"></AddContract>

       <!-- //编辑合同 -->
      <ModifyContract v-bind:info='info'  v-if="modifyShow" @cancelEvent="cancelEvent" @successEvent="successEvent"></ModifyContract>
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
const data = []
import { getNowTime, getNowFormatDate } from '@/utils/util.js'
import {getDwContractList,deletedwContract} from '@/api/video'
import AddContract from '@/views/videoManage/resourceManagement/contractmanagement/addContract'
import ModifyContract from '@/views/videoManage/resourceManagement/contractmanagement/modifyContract'
export default {
  components: {AddContract,ModifyContract},
  data() {
    
    return {
      info:{},
      modifyShow:false,
      addShow:false,
      columnstable,
      data,
      searchData: [],
      // create model
      visible: false,
      confirmLoading: false,
      mdl: null,
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {
        type:1
      },
      // 加载数据方法 必须为 Promise 对象
      
      selectedRowKeys: [],
      selectedRows: [],
      current: 1,
      pageSize: 10,
      selectTime:'',
      tableLoading:false,
      pagination: {
        total: 0,
        showTotal: (total) => `共有 ${total} 条数据`,
      },
    }
  },
  filters: {
   
  },
  created() {
    this.queryParam.current = this.current
    this.queryParam.pageSize = this.pageSize
  },
  computed: {},
  mounted(){
   this.getDataInfoFunction()
  },
  methods: {
    //附件切割
    fileCutting(data) {
      if(data==null){
        return ''
      }else{
        let arr = data.split('/')
        return arr[5]
      }    
    }, 
     //删除费用
    quxiaoEvent(id) {
      this.$confirm({
        title: '提示',
        content: '确定要删除吗?',
        onOk: () => {
          deletedwContract(id).then((response) => {
            if (response != undefined) {
              if (response.code == 200) {
                let type = 'success'
                this.$notification[type]({
                  message: '温馨提示',
                  description: '删除成功!',
                  duration: 3,
                })
                this.getDataInfoFunction()
              }
            }
          })
        },
        onCancel() {},
      })
    },
    //编辑
    modifyEvent(e) {
      this.info =e
      this.modifyShow =true
    },
    // 添加合同
    addEvent(){
     this.addShow =true
    },
    cancelEvent(){
     this.addShow =false
     this.modifyShow =false
    },
    successEvent(){
     this.getDataInfoFunction()
     this.addShow = false
     this.modifyShow = false
    },
    moment,
     onChange(date, dateString) {
      this.queryParam.startTime = dateString[0]+" 00:00:00"
      this.queryParam.endTime = dateString[1]+" 23:59:59"
      this.selectTime = [moment(dateString[0]), moment(dateString[1])] 
     },
    dataFunction(dataTime) {
      var date = new Date(dataTime)
      var year = date.getFullYear()
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes
    }, 
    //查询
    selectEvent(){
      this.queryParam.current = 1 
      this.getDataInfoFunction()
    }, 
    //获取表格数据
    getDataInfoFunction() {
      this.tableLoading = true
      getDwContractList(this.queryParam)
        .then((response) => {   
          const pagination = { ...this.pagination }
          pagination.total = response.data.total
          pagination.pageSize = this.pageSize
          this.pagination = pagination
          this.pagination.current = response.data.current
          this.data = response.data.records
          this.tableLoading = false
        })
        .catch((error) => {
          this.tableLoading = false
        })
    },
    //分页
    pageShow(pagination) {
      this.tableLoading = true
      this.queryParam.current = pagination.current
      this.queryParam.pageSize =  pagination.pageSize
    
      getDwContractList(this.queryParam)
        .then((response) => {
          const pagination = { ...this.pagination }
          pagination.total = response.data.total
          pagination.pageSize = this.pageSize
          this.pagination = pagination
          this.pagination.current = response.data.current
          this.data = response.data.records
          this.tableLoading = false
        })
        .catch((error) => {
          this.tableLoading = false
        })
    },
    
   
  },
}
const columnstable = [
  {
    title: '合同名称',
    dataIndex: 'contractName',
    width: 100,
    align: 'center',
  },
  {
    title: '合同编号',
    dataIndex: 'contractNo', 
    width: 100,
    align: 'center',
  },
  {
    title: '合作单位名称',
    dataIndex: 'companyName', 
    width: 100,
    align: 'center',
  },
   {
    title: '合同开始时间',
    dataIndex: 'startTime', 
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'startTime' },
  },
   {
    title: '合同结束时间',
    dataIndex: 'endTime', 
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'endTime' },
  },
   {
    title: '合同金额',
    dataIndex: 'contractPrice', 
    width: 100,
    align: 'center',
  },
  {
    title: '附件',
    dataIndex: 'annex', 
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'action1' },
  }, 
   {
    title: '操作',
    dataIndex: 'action',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'action' },
  },
]
</script>
